import React, { useState, useEffect } from 'react';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import './css/Footer.css';

interface FooterContent {
  about: {
    title: string;
    items: string[];
  };
  products: {
    title: string;
    items: string[];
  };
  contact: {
    title: string;
    items: string[];
  };
  follow: {
    title: string;
    items: string[];
  };
  copyright: string;
  icp: string;
}

const Footer: React.FC = () => {
  const [activeSection, setActiveSection] = useState<string | null>(null);
  const [language, setLanguage] = useState<'zh' | 'en'>('zh');

  // 多语言内容
  const content: Record<'zh' | 'en', FooterContent> = {
    zh: {
      about: {
        title: '关于我们',
        items: ['公司简介', '发展历程', '企业文化', '荣誉资质']
      },
      products: {
        title: '产品中心',
        items: ['智能测试平台', '自动化设备', '检测仪器', '工业软件']
      },
      contact: {
        title: '联系我们',
        items: ['电话: 400-123-4567', '邮箱: contact@example.com', '地址: 广东省广州市天河区']
      },
      follow: {
        title: '关注我们',
        items: ['微信公众号', 'LinkedIn']
      },
      copyright: '© 2023 精密机械制造有限公司 版权所有',
      icp: '粤ICP备12345678号'
    },
    en: {
      about: {
        title: 'About Us',
        items: ['Company Profile', 'Development History', 'Corporate Culture', 'Certifications']
      },
      products: {
        title: 'Products',
        items: ['Intelligent Testing Platform', 'Automation Equipment', 'Testing Instruments', 'Industrial Software']
      },
      contact: {
        title: 'Contact Us',
        items: ['Tel: 400-123-4567', 'Email: contact@example.com', 'Address: Tianhe District, Guangzhou, Guangdong']
      },
      follow: {
        title: 'Follow Us',
        items: ['WeChat Official Account', 'LinkedIn']
      },
      copyright: '© 2023 Precision Machinery Manufacturing Co., Ltd. All Rights Reserved',
      icp: 'ICP License No.12345678'
    }
  };

  useEffect(() => {
    // 从localStorage获取语言设置
    const storedLanguage = localStorage.getItem('language') as 'zh' | 'en' || 'zh';
    setLanguage(storedLanguage);
    
    // 监听语言变化
    const handleLanguageChange = () => {
      const newLanguage = localStorage.getItem('language') as 'zh' | 'en' || 'zh';
      setLanguage(newLanguage);
    };
    
    window.addEventListener('languageChange', handleLanguageChange);
    return () => window.removeEventListener('languageChange', handleLanguageChange);
  }, []);

  const toggleSection = (section: string) => {
    setActiveSection(activeSection === section ? null : section);
  };

  const currentContent = content[language];

  return (
    <footer className="site-footer">
      <div className="footer-container">
        <div className="footer-content">
          <div 
            className={`footer-section ${activeSection === 'about' ? 'active' : ''}`}
            onClick={() => toggleSection('about')}
          >
            <h3 className="footer-title">
              {currentContent.about.title}
              <span className="toggle-icon">
                {activeSection === 'about' ? <UpOutlined /> : <DownOutlined />}
              </span>
            </h3>
            <ul className="footer-list">
              {currentContent.about.items.map((item, index) => (
                <li key={index}>{item}</li>
              ))}
            </ul>
          </div>
          <div 
            className={`footer-section ${activeSection === 'products' ? 'active' : ''}`}
            onClick={() => toggleSection('products')}
          >
            <h3 className="footer-title">
              {currentContent.products.title}
              <span className="toggle-icon">
                {activeSection === 'products' ? <UpOutlined /> : <DownOutlined />}
              </span>
            </h3>
            <ul className="footer-list">
              {currentContent.products.items.map((item, index) => (
                <li key={index}>{item}</li>
              ))}
            </ul>
          </div>
          <div 
            className={`footer-section ${activeSection === 'contact' ? 'active' : ''}`}
            onClick={() => toggleSection('contact')}
          >
            <h3 className="footer-title">
              {currentContent.contact.title}
              <span className="toggle-icon">
                {activeSection === 'contact' ? <UpOutlined /> : <DownOutlined />}
              </span>
            </h3>
            <ul className="footer-list">
              {currentContent.contact.items.map((item, index) => (
                <li key={index}>{item}</li>
              ))}
            </ul>
          </div>
          <div 
            className={`footer-section ${activeSection === 'follow' ? 'active' : ''}`}
            onClick={() => toggleSection('follow')}
          >
            <h3 className="footer-title">
              {currentContent.follow.title}
              <span className="toggle-icon">
                {activeSection === 'follow' ? <UpOutlined /> : <DownOutlined />}
              </span>
            </h3>
            <div className="social-media">
              {currentContent.follow.items.map((item, index) => (
                <span key={index}>{item}</span>
              ))}
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <p>{currentContent.copyright}</p>
          <p>{currentContent.icp}</p>
        </div>
      </div>
    </footer>
  );
};

export default Footer;